<template>
  <div class="app-container">
    <el-button type="primary" @click="handleDevelopStage">新增沟通方式</el-button>
    <!--数据列表-->
    <div class="table-container" style="min-width: 1002px">
      <el-table v-loading="listLoading" :data="tableData" border height="400">
        <el-table-column label="跟进方式" min-width="200" align="center" prop="methodName">
        </el-table-column>
        <el-table-column label="沟通方式" align="center" min-width="200" prop="interactType">
        </el-table-column>
        <el-table-column label="状态" min-width="150" align="center">
          <template #default="{ row }">
            <span>{{ row.isEnable == 1 ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" min-width="150" prop="sortOrder">
          </el-table-column>
        <el-table-column min-width="200" label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" @click="handleDevelopStage(row)">修改</el-button>
            <el-button type="text" size="mini" @click="delDevelopStep(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="count">
        </el-pagination>
      </div>
    </div>
    <!-- 新增沟通方式 -->
    <addCommunication ref="addCommunicationRef" @upload="getList"></addCommunication>
  </div>
</template>
<script>
// import { mapGetters } from "vuex";
import addCommunication from "./addCommunication.vue";
import { getInteractListAPI, delInteractAPI } from '@/api/fms.js'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
};
export default {
  name: "communicationMethods",
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      listLoading: false,
      count: 0,
      stepId: null
    };
  },
  components: {
    addCommunication,
  },
  computed: {
    // ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    this.getList()
  },
  filters: {},
  methods: {
    //获取列表
    getList() {
      this.listLoading = true;
      getInteractListAPI(this.listQuery)
        .then((response) => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 打开新增沟通方式
    handleDevelopStage(row) {
      if (row.tmId) {
        this.$refs.addCommunicationRef.showDetail(row.tmId)
      } else {
        this.$refs.addCommunicationRef.showDetail()
      }
    },
    // 删除沟通方式
    delDevelopStep(row) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delInteractAPI({ interactId: row.tmId }).then((res) => {
          this.$message({
            type: 'success',
            message: '已删除成功!'
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
  },
};
</script>



